<template>
  <view class="container">
    <!-- 顶部轮播图 -->
    <swiper :autoplay="true" :duration="500" :indicator-dots="true" :interval="3000" class="banner-swiper">
      <swiper-item v-for="(item, index) in bannerList" :key="index">
        <view class="banner-item" @click="handleBannerClick(item)">
          <image :src="item.image" class="banner-image" mode="aspectFill"/>
          <view class="banner-overlay">
            <text class="banner-title">{{ item.title }}</text>
            <text class="banner-subtitle">{{ item.text }}</text>
          </view>
        </view>
      </swiper-item>
    </swiper>


    <!-- 功能宫格 -->
    <view class="feature-grid-section">
      <tui-grid :border="false" :column="3" :unlined="true">
        <block v-for="(item, index) in featureList" :key="index">
          <tui-grid-item :border="false" :cell="3" :unlined="true" @click="handleFeatureClick(item)">
            <view class="grid-item-content">
              <view class="tui-grid-icon">
                <tui-icon :color="item.color" :name="item.icon" :size="40"></tui-icon>
              </view>
              <text class="tui-grid-label">{{ item.name }}</text>
            </view>
          </tui-grid-item>
        </block>
      </tui-grid>
    </view>

    <!-- 语言切换悬浮按钮 -->
    <LanguageSwitch />

  </view>
</template>

<script lang="ts" setup>
import {onMounted, ref, computed} from 'vue'
import { useI18n } from '@/composables/useI18n'
import LanguageSwitch from '@/components/LanguageSwitch.vue'
import { usePageTitle } from '@/composables/usePageTitle'
import { useTabBar } from '@/composables/useTabBar'

// 使用国际化
const { t } = useI18n()

// 设置页面标题
usePageTitle('pages/home/index')

// 设置tabBar
useTabBar()

// 类型定义
interface BannerItem {
  id: number
  image: string
  title: string
  url: string
  text: string
}

interface FeatureItem {
  id: number
  name: string
  icon: string
  color: string
  url: string
}

// 轮播图数据 - 使用国际化
const bannerList = computed<BannerItem[]>(() => [
  {
    id: 1,
    image: '/static/swiper/001.jpg',
    title: t('home.banner.alphabet.title'),
    url: '/pages/learn/alphabet/index',
    text: t('home.banner.alphabet.subtitle')
  },
  {
    id: 2,
    image: '/static/swiper/002.jpg',
    title: t('home.banner.vocabulary.title'),
    url: '/pages/learn/vocabulary/index',
    text: t('home.banner.vocabulary.subtitle')
  },
  {
    id: 3,
    image: '/static/swiper/003.jpg',
    title: t('home.banner.practice.title'),
    url: '/pages/learn/practice/index',
    text: t('home.banner.practice.subtitle')
  }
])

// 功能宫格数据 - 使用国际化
const featureList = computed<FeatureItem[]>(() => [
  {
    id: 1,
    name: t('home.features.alphabet'),
    icon: 'shut',
    color: '#007aff',
    url: '/pages/profile/index'
  },
  {
    id: 2,
    name: t('home.features.letters'),
    icon: 'like',
    color: '#34c759',
    url: '/pages/profile/learnlist'
  },
  {
    id: 3,
    name: t('home.features.settings'),
    icon: 'like',
    color: '#ff9500',
    url: '/pages/profile/edit'
  }
])

// 处理轮播图点击
const handleBannerClick = (item: BannerItem): void => {
  uni.navigateTo({
    url: item.url,
    fail: (err: any) => {
      console.error('页面跳转失败:', err)
      uni.showToast({
        title: t('home.toast.pageNotOpen'),
        icon: 'none'
      })
    }
  })
}

// 处理功能点击
const handleFeatureClick = (item: FeatureItem): void => {
  console.log('功能点击:', item)
  uni.navigateTo({
    url: item.url,
    fail: (err: any) => {
      console.error('页面跳转失败:', err)
      uni.showToast({
        title: t('home.toast.featureNotOpen'),
        icon: 'none'
      })
    }
  })
}

// 页面加载时获取数据
onMounted((): void => {
  console.log('首页加载完成')
})
</script>

<style scoped>
.container {
  min-height: 100vh;
  background: #f8f9fa;
}

/* 轮播图样式 */
.banner-swiper {
  width: 95vw;
  height: 350rpx;
  margin: 20rpx;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.1);
}

.banner-item {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 16rpx;
  overflow: hidden;
}

.banner-image {
  width: 100%;
  height: 100%;
  border-radius: 16rpx;
  object-fit: cover;
}

.banner-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
  padding: 40rpx 30rpx 30rpx 30rpx;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.banner-title {
  color: white;
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
}

.banner-subtitle {
  color: rgba(255, 255, 255, 0.9);
  font-size: 24rpx;
  line-height: 1.4;
  text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.3);
}


/* 功能宫格区域 */
.feature-grid-section {
  margin: 20rpx;
  background: white;
  border-radius: 16rpx;
  padding: 40rpx 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

/* 移除ThorUI默认边框 */
.feature-grid-section /deep/ .tui-grid,
.feature-grid-section ::v-deep .tui-grid {
  border: none !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
  outline: none !important;
}

.feature-grid-section /deep/ .tui-grid-item,
.feature-grid-section ::v-deep .tui-grid-item {
  border: none !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
  outline: none !important;
}

.feature-grid-section /deep/ .tui-grid-item::before,
.feature-grid-section /deep/ .tui-grid-item::after,
.feature-grid-section ::v-deep .tui-grid-item::before,
.feature-grid-section ::v-deep .tui-grid-item::after {
  display: none !important;
}

.feature-grid-section /deep/ .tui-grid::before,
.feature-grid-section /deep/ .tui-grid::after,
.feature-grid-section ::v-deep .tui-grid::before,
.feature-grid-section ::v-deep .tui-grid::after {
  display: none !important;
}


/* 宫格项目内容 */
.grid-item-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 20rpx 10rpx;
}

/* 宫格图标样式 */
.tui-grid-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 15rpx;
  height: 80rpx;
  width: 100%;
}

.tui-grid-label {
  font-size: 24rpx;
  color: #333;
  text-align: center;
  font-weight: 500;
  width: 100%;
  display: block;
  line-height: 1.2;
}

/* 响应式调整 */
@media (max-width: 750rpx) {
  .banner-swiper {
    height: 300rpx;
  }
}
</style>